<template>
    <div class="audit-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>{{ pageTitle }}</h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleCancel">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 审核内容 -->
        <div class="audit-content">
            <!-- 人员信息 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">人员信息</span>
                    </div>
                </template>
                <div class="info-grid">
                    <div class="info-left">
                        <div class="info-item">
                            <span class="label">{{ isOrganization ? '法人信息:' : '姓名:' }}</span>
                            <span class="value">{{ auditData.legalName || auditData.name }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">{{ isOrganization ? '法人电话:' : '电话:' }}</span>
                            <span class="value">{{ auditData.legalPhone || auditData.phone }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">有效证件:</span>
                            <span class="value">
                                {{ auditData.certificateFile || '证件图片.jpeg' }}
                                <el-button type="primary" size="small" @click="previewImage(auditData.certificateFile || '证件图片.jpeg')">
                                    预览
                                </el-button>
                            </span>
                        </div>
                        <div class="info-item">
                            <span class="label">申请时间:</span>
                            <span class="value">{{ auditData.applicationTime || '2025 7/20 16:55:22' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">身份证号:</span>
                            <span class="value">{{ auditData.legalIdCard || auditData.idCard || '43112119900877874445' }}</span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">注册时间:</span>
                            <span class="value">{{ auditData.registrationTime || '2025 7/20 16:55:22' }}</span>
                        </div>
                    </div>
                    <div class="info-right">
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">扫描证件正面:</span>
                            <span class="value">
                                {{ auditData.idCardFront || '周某.jpeg' }}
                                <el-button type="primary" size="small" @click="previewImage(auditData.idCardFront || '周某.jpeg')">
                                    预览
                                </el-button>
                            </span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">扫描证件反面:</span>
                            <span class="value">
                                {{ auditData.idCardBack || '周某.jpeg' }}
                                <el-button type="primary" size="small" @click="previewImage(auditData.idCardBack || '周某.jpeg')">
                                    预览
                                </el-button>
                            </span>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 机构信息 / 供应商信息 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">{{ isOrganization ? '机构信息' : '供应商信息' }}</span>
                    </div>
                </template>
                <div class="info-grid">
                    <div class="info-left">
                        <div class="info-item">
                            <span class="label">服务商名称:</span>
                            <span class="value">{{ auditData.name || (isOrganization ? '道许一家协会' : '个人服务商名称') }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">服务商类型:</span>
                            <span class="value">{{ isOrganization ? '机构' : '个体工商户' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">注册地址:</span>
                            <span class="value">{{ auditData.address || '湖南生长沙市雨花区砂子塘小区' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">介绍:</span>
                            <span class="value">{{ auditData.description || '供应商介绍,成立多少年' }}</span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">联系人:</span>
                            <span class="value">{{ auditData.contactName || '2000年左右开始在全国推广,目前在甘肃、陕西、宁夏等地广泛种植。' }}</span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">联系电话:</span>
                            <span class="value">{{ auditData.phone || '17458585844' }}</span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">联系人:</span>
                            <span class="value">{{ auditData.contactName || '周斌' }}</span>
                        </div>
                        <div v-if="isOrganization" class="info-item">
                            <span class="label">责任单位:</span>
                            <span class="value">{{ auditData.responsibleUnit || '长沙市XXXX局' }}</span>
                        </div>
                    </div>
                    <div class="info-right">
                        <div class="info-item">
                            <span class="label">邮箱:</span>
                            <span class="value">{{ auditData.email || '8585844@qq.com' }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">传真:</span>
                            <span class="value">{{ auditData.fax || '17458585844' }}</span>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 权限配置 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">权限配置</span>
                        <el-badge :value="enabledPermissionsCount" class="badge">
                            <span></span>
                        </el-badge>
                    </div>
                </template>
                <div class="permission-buttons">
                    <div class="permission-item">
                        <span class="permission-label">内容</span>
                        <div class="permission-toggle" :class="{ active: permissions.content }" @click="togglePermission('content')">
                            <div class="toggle-button" :class="{ enabled: permissions.content }">
                                <el-icon v-if="permissions.content" class="check-icon">
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="permission-item">
                        <span class="permission-label">服务</span>
                        <div class="permission-toggle" :class="{ active: permissions.service }" @click="togglePermission('service')">
                            <div class="toggle-button" :class="{ enabled: permissions.service }">
                                <el-icon v-if="permissions.service" class="check-icon">
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                    <div class="permission-item">
                        <span class="permission-label">咨询</span>
                        <div class="permission-toggle" :class="{ active: permissions.consultation }" @click="togglePermission('consultation')">
                            <div class="toggle-button" :class="{ enabled: permissions.consultation }">
                                <el-icon v-if="permissions.consultation" class="check-icon">
                                    <Check />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>

            <!-- 审批记录 -->
            <el-card shadow="never" class="info-card">
                <template #header>
                    <div class="card-header">
                        <span class="card-title">审批记录</span>
                    </div>
                </template>
                <div class="approval-form">
                    <div class="approval-info">
                        <div class="approval-item">
                            <span class="label">审批人:</span>
                            <span class="value">{{ auditData.approver || 'admin' }}</span>
                        </div>
                        <div class="approval-item">
                            <span class="label">申请时间:</span>
                            <span class="value">{{ auditData.applicationTime || '2025 7/20 16:55:22' }}</span>
                        </div>
                    </div>
                    <div class="approval-description">
                        <span class="label">审批说明:</span>
                        <div class="description-content">
                            {{ auditData.approvalDescription || '审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明' }}
                        </div>
                    </div>
                    <div class="rejection-reason">
                        <span class="label">不通过原因:</span>
                        <el-input
                            v-model="rejectionReason"
                            type="textarea"
                            :rows="4"
                            placeholder="请输入不通过的原因"
                            class="rejection-textarea"
                        />
                    </div>
                    <div class="approval-actions">
                        <el-button type="danger" @click="handleReject">不通过</el-button>
                        <el-button type="primary" @click="handleApprove">通过</el-button>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 图片预览对话框 -->
        <el-dialog
            v-model="imagePreviewVisible"
            title="图片预览"
            width="80%"
            center
        >
            <div class="image-preview-container">
                <img :src="previewImageUrl" alt="预览图片" class="preview-image" />
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ArrowLeft, Check } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

// 获取路由参数
const id = route.params.id as string;
const type = route.params.type as string;

// 判断是否为机构类型
const isOrganization = computed(() => type === 'organization');

// 页面标题
const pageTitle = computed(() => isOrganization.value ? '机构审核' : '供应商审核');

// 权限配置
const permissions = reactive({
    content: true,  // 默认启用内容权限
    service: false,
    consultation: false
});

// 计算启用的权限数量
const enabledPermissionsCount = computed(() => {
    return Object.values(permissions).filter(Boolean).length;
});

// 不通过原因
const rejectionReason = ref('');

// 图片预览相关
const imagePreviewVisible = ref(false);
const previewImageUrl = ref('');

// 审核数据
const auditData = reactive({
    name: '',
    type: '',
    address: '',
    description: '',
    contactName: '',
    phone: '',
    email: '',
    fax: '',
    legalName: '',
    legalPhone: '',
    legalIdCard: '',
    idCard: '',
    certificateFile: '',
    idCardFront: '',
    idCardBack: '',
    applicationTime: '',
    registrationTime: '',
    responsibleUnit: '',
    approver: '',
    approvalDescription: ''
});

// 切换权限
const togglePermission = (permissionType: keyof typeof permissions) => {
    permissions[permissionType] = !permissions[permissionType];
    ElMessage.success(`${permissions[permissionType] ? '启用' : '禁用'}${getPermissionLabel(permissionType)}权限`);
};

// 获取权限标签
const getPermissionLabel = (type: keyof typeof permissions) => {
    const labels = {
        content: '内容',
        service: '服务',
        consultation: '咨询'
    };
    return labels[type];
};

// 预览图片
const previewImage = (imageName: string) => {
    // 这里应该根据实际图片路径来设置
    // 暂时使用占位图片
    previewImageUrl.value = `https://via.placeholder.com/800x600/409EFF/FFFFFF?text=${encodeURIComponent(imageName)}`;
    imagePreviewVisible.value = true;
};

// 审核通过
const handleApprove = () => {
    ElMessageBox.confirm(
        '确定要通过此申请吗？',
        '确认通过',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(() => {
        ElMessage.success('审核通过');
        // 这里可以调用审核通过的API
        router.push('/service-provider-main');
    }).catch(() => {
        // 用户取消
    });
};

// 审核不通过
const handleReject = () => {
    if (!rejectionReason.value.trim()) {
        ElMessage.warning('请填写不通过原因');
        return;
    }
    
    ElMessageBox.confirm(
        '确定要不通过此申请吗？',
        '确认不通过',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage.success('审核不通过');
        // 这里可以调用审核不通过的API
        router.push('/service-provider-main');
    }).catch(() => {
        // 用户取消
    });
};

// 返回
const handleCancel = () => {
    router.push('/service-provider-main');
};

// 页面初始化
onMounted(() => {
    // 根据ID加载审核数据
    console.log('审核ID:', id, '类型:', type);
    
    // 这里应该调用API加载具体的审核数据
    // 暂时使用模拟数据
    if (isOrganization.value) {
        // 机构数据
        auditData.name = '道许一家协会';
        auditData.legalName = '周立波';
        auditData.legalPhone = '17458585785';
        auditData.legalIdCard = '43112119900877874445';
        auditData.contactName = '周斌';
        auditData.phone = '17458585844';
        auditData.email = '8585844@qq.com';
        auditData.fax = '17458585844';
        auditData.address = '湖南生长沙市雨花区砂子塘小区';
        auditData.description = '供应商介绍,成立多少年';
        auditData.responsibleUnit = '长沙市XXXX局';
        auditData.certificateFile = '证件图片.jpeg';
        auditData.idCardFront = '周某.jpeg';
        auditData.idCardBack = '周某.jpeg';
    } else {
        // 供应商数据
        auditData.name = '个人服务商名称';
        auditData.legalName = '周立波';
        auditData.legalPhone = '17458585785';
        auditData.legalIdCard = '43112119900877874445';
        auditData.phone = '17458585785';
        auditData.email = '8585844@qq.com';
        auditData.fax = '17458585844';
        auditData.address = '湖南生长沙市雨花区砂子塘小区';
        auditData.description = '供应商介绍,成立多少年';
        auditData.certificateFile = '周某.jpeg';
    }
    
    auditData.applicationTime = '2025 7/20 16:55:22';
    auditData.registrationTime = '2025 7/20 16:55:22';
    auditData.approver = 'admin';
    auditData.approvalDescription = '审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明审批内容说明';
});
</script>

<style scoped>
.audit-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

/* 页面头部 */
.page-header {
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #303133;
    font-size: 24px;
    font-weight: 600;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 审核内容 */
.audit-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    border-radius: 8px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.badge {
    margin-left: 10px;
}

/* 信息网格 */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    min-height: 32px;
}

.label {
    font-weight: 600;
    color: #606266;
    min-width: 120px;
    margin-right: 10px;
    flex-shrink: 0;
}

.value {
    color: #303133;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 权限配置 */
.permission-buttons {
    padding: 20px 0;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    align-items: center;
}

.permission-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.permission-label {
    font-size: 12px;
    font-weight: 500;
    color: #606266;
}

.permission-toggle {
    width: 40px;
    height: 20px;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
    background-color: #f5f7fa;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.permission-toggle.active {
    border-color: #67c23a;
    background-color: #67c23a;
}

.toggle-button {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: absolute;
    left: 1px;
}

.toggle-button.enabled {
    left: 21px;
    border-color: #67c23a;
}

.check-icon {
    color: #67c23a;
    font-size: 10px;
    font-weight: bold;
}

/* 审批记录 */
.approval-form {
    padding: 20px 0;
}

.approval-info {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.approval-item {
    display: flex;
    align-items: center;
}

.approval-description {
    margin-bottom: 20px;
}

.description-content {
    margin-top: 10px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 4px;
    color: #606266;
    line-height: 1.6;
}

.rejection-reason {
    margin-bottom: 30px;
}

.rejection-textarea {
    margin-top: 10px;
}

.approval-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

/* 图片预览 */
.image-preview-container {
    text-align: center;
}

.preview-image {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .audit-container {
        padding: 10px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .approval-info {
        flex-direction: column;
        gap: 15px;
    }
    
    .approval-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .info-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .label {
        min-width: auto;
        margin-bottom: 5px;
    }
    
    .permission-buttons {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .permission-item {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        max-width: 150px;
    }
}
</style>
